import { Component } from 'react'
import { AtTabs, AtTabsPane, AtGrid } from 'taro-ui'
import { View } from '@tarojs/components'
import Taro from "@tarojs/taro"
import CustomAtGrid from '../CustomAtGrid/index'
import CustomSwiper from '../CustomSwiper/index'

import './index.scss'
import "taro-ui/dist/style/components/tabs.scss";

export default class CustomAtTabs extends Component{

    constructor(){
        super(...arguments)
        this.state = {
            // 当前tabs，从0开始
            current: 0,
            tabList: [{ title: '首页' }, { title: '服装' }, { title: '电器' },{ title: '食品' },{ title: '医药' },{ title: '图书' }]
        }
    }

    /**
     * 组件将要渲染时，加载出通告栏目的信息。
     */
    async componentWillMount(){
        // try{
        //     const res = await Taro.request({
        //         // url: '/api/v1/freerdbj/fwtm/aoam/acceptorderback/query/1', //仅为示例，并非真实的接口地址
        //         url: 'http://10.161.128.18:2779/freerdbj/fwtm/aoam/acceptorderback/query/1',
        //         data: {
        //             // x: '',
        //             // y: ''
        //         },
        //         header: {
        //             'content-type': 'application/json' // 默认值
        //         },
        //         method: "GET"
        //     })
        //     this.setState({
        //         noticeContent: res.data.MSG
        //     });
        // }catch{
        //     Taro.showToast({
        //         title: "载入远程数据错误"
        //     })
        // }
    }

    handleClick (value) {
        this.setState({
            current: value
        })
    }

    render(){
        const { current, tabList } = this.state;

        return(
            <View>
                <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
                    <AtTabsPane current={current} index={0} >
                        <View style='background-color: #FAFBFC;text-align: center;' >
                            {/* <CustomSwiper></CustomSwiper> */}
                            <CustomAtGrid></CustomAtGrid>
                        </View>
                    </AtTabsPane>
                    <AtTabsPane current={current} index={1}>
                        <View style='background-color: #FAFBFC;text-align: center;'>
                            <CustomAtGrid></CustomAtGrid>
                        </View>
                    </AtTabsPane>
                    <AtTabsPane current={current} index={2}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={current} index={3}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={current} index={4}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={current} index={5}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
                    </AtTabsPane>
                    </AtTabs>
            </View>
        )
    }
}